<template>
  <div class="manageRole">
    <div class="btnGrounp">
      <el-button @click="handleEdit(0)">新增角色</el-button>
    </div>
    <div class="search">
      <ul>
        <li>
          <span>角色</span>
          <el-select v-model="search.role" placeholder="请选择" @visible-change='getAllRoleSelect'>
            <el-option v-for="item in search.roleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </li>
        <li class="lastLi">
          <el-button @click="searchRole">查询</el-button>
        </li>
      </ul>
    </div>
    <div class="content">
       <el-table :data="contentData" style="width: 100%" stripe :header-cell-class-name='lastTaHead'>
        <el-table-column prop="roleName" label="角色" width="30%"  align='center'></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述" width="50%"  align='center'></el-table-column>
        <el-table-column prop="topMenuName" label="拥有权限" width="30%" align='center' show-overflow-tooltip ></el-table-column>
        <el-table-column label="操作" align='center' width="100%" class-name='lastTd'>
          <template slot-scope="scope">
            <el-button class="edit" size='mini'  @click="handleEdit(1,scope.$index, scope.row)">编辑</el-button>
            <el-button  class="delete" size='mini' type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            
          </template>
        </el-table-column >
      </el-table>
    </div>
    <div class="paging">
      <el-pagination :page-size="pageSize"  layout="prev, pager, next" :total="totalNum" @current-change='changeCurrentPage'></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'manageRole',
  data () {
    return {
      search:{
        role:'',
        roleOptions:[],
      },//查询对象
      //内容数据
      contentData: [],
      pageSize:7,//每页显示条目个数
      totalNum:7,//总条目数   
      currentPage:1,
      permissions:{},//权限列表
    }
  },
  methods: {
    //新增/编辑行
    handleEdit(type,index, row) {
      let _this = this;
      //console.log(type,index, row);
      // _this.dialogFormVisible = true;//显示对话框

      if(type == 0){//新增操作
        // _this.formTitle = '新增';
        _this.$router.push({
          path:'/operateRole/add/-1'
        });
      }else{//编辑操作
        // _this.formTitle = '编辑';
        _this.$router.push({
          path:'/operateRole/edit/'+row.id
        });
      }

    },
    //删除行
    handleDelete(index, row) {
      let _this = this;
      //console.log(index, row);
      _this.$confirm('是否删除?',  {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let api = '/api/admin/role/delete?id='+row.id;
          let sessionId = _this.$store.state.id;//获取token
          _this.axios({
            url:api,
            method: 'post',
            headers:{
              sessionId,
            }		
  			}).then(res=>{
            //console.log('删除行',res)
            if(res.data.code == 401){
                _this.$message({
                  type: 'info',
                  message: '登录已失效，请重新登录'
                });  
                _this.$router.push({
                  path:"/"
                });
                return
            }
            if(res.data.code == 200){            
              _this.$message({
                type: 'success',
                message: '删除成功!'
              });
              _this.getAllRole();//刷新
            }
          });
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //改变当前页
    changeCurrentPage(val){
      //console.log(`当前页: ${val}`);
      let _this = this;
      _this.currentPage = val;
      _this.getAllRole();//调用同一接口
    },
    //最后一列的表头
    lastTaHead({row, column, rowIndex, columnIndex}){
      let _this = this;
      if(columnIndex == 3){
        return 'lastTd lastTdHead'
      }
    },
    // 获取所有角色
    getAllRole(searchPage){
      let _this = this;
      let api = '/api/admin/role/find_page';
      let roleName = '';
      _this.search.roleOptions.forEach(item=>{
        if(item.value == _this.search.role){
          roleName = item.label
        }
        
      });
      //console.log('roleName',roleName);
      if(roleName == '全部'){
        roleName = '';
      }
      let sessionId = _this.$store.state.id;//获取token 
      _this.axios.post(api,{
          "pageIndex": searchPage == 1?searchPage:_this.currentPage,
          "pageSize": 7,
          "roleNameLike": roleName,//管理员角色名称
      },{
        headers:{
          sessionId,
        }	
      }).then(res=>{
        //console.log('所有角色信息',res);
        if(res.data.code == 401){
          _this.$message({
            type: 'info',
            message: '登录已失效，请重新登录'
          });  
          _this.$router.push({
            path:"/"
          });
          return
        }
        if(res.data.code == 403){
          _this.$message({
            type: 'info',
            message: res.data.status
          });  
          return
        }
        if(res.data.code == 200){
          
          _this.totalNum = res.data.data.count;//获取总条数
          _this.contentData = res.data.data.bussData;
        }
      });
    },
    //查询角色
    searchRole(){
      let _this = this;
      //console.log('查询');
      _this.getAllRole(1);//调用同一接口
    },
    //获取所有权限的id
    getAllPermissionsId(){
      let _this = this;
      let api = '/api/admin/menu/find_manager_menus';
      let sessionId = _this.$store.state.id;//获取token
      _this.axios.get(api,{
        headers:{
            sessionId,
          }
      }).then(res=>{
        //console.log('id列表返回',res);
        if(res.data.code == 401){
          _this.$message({
            type: 'info',
            message: '登录已失效，请重新登录'
          });  
          _this.$router.push({
            path:"/"
          });
          return
        }
        if(res.data.code == 403){
          _this.$message({
            type: 'info',
            message: res.data.status
          });  
          return
        }
        if(res.data.code == 200){
          
            res.data.data.bussData.forEach(item => {
              var key = item.id;
              var value = item.menuName
              // let obj = {}
              _this.permissions[value] = key;
            });
          //console.log('所有权限的id',_this.permissions);
          _this.$store.dispatch('savePermissions',_this.permissions);//缓存登录状态 


          // //console.log(_this.contentData,'最终contentData');
        }
        
        



      });
    },
    //获取所有角色
    getAllRoleSelect(isShow){
      let _this = this;
      //console.log(isShow,'下拉框是否出现');
      if(!isShow){
        return
      }
      let api = '/api/admin/role/find_list';
      let role = [];//清空
      let sessionId = _this.$store.state.id;//获取token 
      _this.axios({
            url:api,
            method: 'post',
            headers:{
              sessionId,
            }		
  			}).then(res=>{
        //console.log('所有的角色可能值',res);
        let class2 = res.data.data.bussData;
        class2.forEach(item=>{
          let obj = {};
          obj.value = item.id;
          obj.label = item.roleName;
          role.push(obj);
        });
        role = role.filter(item=>{
          return item.label != '全部'
        });
        _this.$store.dispatch('saveRole',role);//缓存所有二级分类
        _this.search.roleOptions = _this.$store.state.role;//获取所有角色
        let obj = {
          value:"",
          label:"全部",
        }

        _this.search.roleOptions.unshift(obj);
        //console.log('role',role,_this.$store.state.role);

      });
    },
  },
  beforeMount(){
    let _this = this;
  },
  mounted(){
    let _this = this;
    _this.getAllPermissionsId();//获取所有权限id
    _this.getAllRole();//获取所有角色
    //  _this.search.roleOptions = _this.$store.state.role;//获取所有角色
    _this.getAllRoleSelect(true);//获取所有角色下拉框
  }
}
</script>

<style scoped>
/* 整体样式 */
.manageRole{
  height: 100%;
  width: 100%;
  position: relative;
  padding-left: 2%;
  font-size: .875rem;
}
.manageRole>>>.btnGrounp .el-button{
  background-color: rgba(53, 174, 160, 1);
  color: rgb(255, 255, 255,1);
}
/* 查询 */
.manageRole>>>.search{
  width: 100%;
  height: 10%;
  line-height: 10%;
  position: absolute;
  top: 10%;
  font-size: .875rem;
}
/* 输入框 */
.manageRole>>>.el-input{
  width: 70%;
}
/* 输入框 */
.manageRole>>>.el-select{
  width: 70%;
}
/* 选择框下的输入框 */
.manageRole>>>.el-select .el-input{
  width: 100%;
}
.manageRole>>>.search ul{
  width: 100%;
  height: 100%;
  display: flex;
  
}
.manageRole>>>.search ul li{
  /* flex:1; */
  padding-right: 1%;
}
.manageRole>>>.search ul li.lastLi{
    position:absolute;
    right: 15%;
}
.manageRole>>>.search ul li span{
  padding-right: 2%;
}
.manageRole>>>.search ul li.lastLi button{
  color:rgba(16, 16, 16, 1);
}
/* 主要内容 */
.manageRole>>>.content{
  width: 85%;
  position: absolute;
  top: 21%;
  color: rgba(16, 16, 16, 1) !important;
}
.manageRole>>>.content img{
  width: 21%;
}
.manageRole>>>.content table{
  width: 100% !important;
}
.manageRole>>>.content table td .cell{
  width: 100% !important;
}
/* table无数据时的显示 */
.manageRole>>>.el-table__empty-block{
   width: 100% !important;
}
/* 最后一列 */
.manageRole>>>.lastTd{
  text-align: left;
  padding-left: 2%;
}
.manageRole>>>.lastTd .cell{
   height: 1.75rem;
  line-height: 1.75rem;


}
/* 消除表头变形 */
.manageRole>>>table .gutter{
  display: block !important;
}
/* .manageRole>>>.lastTd .cell{
  height: 20%;
  line-height: 20%;
} */
/* 最后一列表头 */
.manageRole>>>.lastTdHead{
  padding-left: 6%;
}
/* 表格内的按钮 */
.manageRole>>>.content table .defaultBtn{
  color: rgba(16, 16, 16, 1);
}
/* 编辑按钮 */
.manageRole>>>.edit{
  background-color: rgba(63, 81, 181, 1);
}
/* 删除按钮 */
.manageRole>>>.delete{
  background-color: rgba(229, 28, 35, 1);
}
/* 调整排序按钮 */
.manageRole>>>.adjust{
  background-color: rgba(139, 195, 74, 1);

}
/* 调整排序输入框 */
.manageRole>>>.adjustSort{
  display: inline-block;
  height: 92%;
  width: 60%;
}
.manageRole>>>.adjustSort .el-input{
  width: 42%;
  height: 100%;

}
.manageRole>>>.adjustSort .el-input input{
  height: 100%;
}
.manageRole>>>.adjustSort .el-input__inner{
  /* height: 1.9375rem; */
}
.manageRole>>>.adjustSort .el-button{
  line-height: 0.07;
  /* height: 100%;
  line-height: 1.75rem; */

}
/* 分页 */
.manageRole>>>.paging{
  position: absolute;
  bottom: 0%;
  text-align: center;
  width: 85%;
}
/* 对话框 */
/* .manageRole>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .manageRole>>>.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .manageRole>>>.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .manageRole>>>.avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
</style>
